<template>
    <div style="background-color: #efefef;">
        <el-container height="700px" > 
          <!-- //头部 -->
          <el-header height="70px">  
            <div style="margin-top: 25px; ">
                <span style="font-size: 18px"> &lt; &nbsp; <el-button @click="returnMyPage"  type="text"><span style="font-size:17px" >返回</span></el-button></span>
            <span style="margin-left:75px; font-size: 18px; "><b>我的订单</b></span>
            </div>
          </el-header>
  
          <!-- //身体 -->
        <el-main>
              <!-- 全部，待收货，待评价 -->
              <el-container>
                <el-col >
                
                    <el-tabs :stretch=true v-model="activeName" @tab-click="handleClick">


              
                  <el-tab-pane   label="全部" name="all" >
                  
                    <el-row>
                        <el-col v-for="m in myOrders" :key="m.id" style="background-color:white;border-radius:10px;">
                            <div style="margin:10px">
                                <span style="font-size:13px;margin-left:5px">{{ '订单编号：'+m.id }}</span>
                                <span style="font-size:16px;margin-left:50px"><b>{{ m.status==2? '待收货':m.status==3 ? '已收货':m.status==0? '待分拣':m.status==1?'待配送':'出错！' }}</b></span>
                                <div style="font-size:13px;margin-left:5px">{{ m.createTime }}</div>
                                
                                <p ></p>
                                <span style="font-size:15px;margin-left:5px">商品名称</span>
                                <span style="font-size:15px;margin-left:75px">商品数量</span>
                                <div style="margin-left:5px;margin-top:5px" v-for=" od in m.ordersDetails" :key="od.goodsId">
                                    <el-row>
                                        <el-col :span="12">
                                            <div>
                                                <span>{{ od.name }}</span>
                                            </div>
                                        </el-col>

                                        <el-col :span="12">
                                            <div> 
                                                <span>{{ od.goodsNum }}</span>
                                            </div>
                                        </el-col>
                                    </el-row>
                                    
                                        
                                        
                                    
                                </div>
                                <p></p>
                                <span style="font-size:15px;margin-left:5px"><b>{{ '合计：'+m.goodsNums+' 件' }}</b></span><span style="font-size:15px;margin-left:65px"><b>{{ '总金额：'+m.actualAmount+'￥' }}</b></span>
                                <!-- <p style="margin-top:20px"></p>
                            

                                <div>
                                    <el-button type="info" round class="button"  v-if="m.status==2? true:false" size="medium" @click="updateOrderStatusAndSortingTime(m.id)"  >确认收货</el-button>
                                    <el-button type="info" round v-if="m.status==3? true:false" class="button" size="medium" @click="goodsDetails(m.id)">评价一下</el-button>
                                </div> -->

                            </div>

                            <p></p>

                            <div style="padding-top:10px;background-color: #efefef;"></div>
                            
                        </el-col>
                    </el-row>

                    <div style="text-align:center;font-size:15px;margin-top:10px" v-if=" this.myOrders.length==0 ? true : false "><b>暂无数据</b></div> 

                
                    </el-tab-pane>

                  <el-tab-pane label="待收货" name="goods" >

                    <el-row>
                        <el-col v-for="m in myToReceiveOrders" :key="m.id" style="background-color:white;border-radius:10px;">
                            <div style="margin:10px">
                                <span style="font-size:13px;margin-left:5px">{{ '订单编号：'+m.id }}</span>
                                <span style="font-size:16px;margin-left:50px"><b>{{ m.status==2? '待收货':m.status==3 ? '已收货':m.status==0? '待分拣':m.status==1?'待配送':'出错！' }}</b></span>
                                <div style="font-size:13px;margin-left:5px">{{ m.createTime }}</div>
                                
                                <p ></p>
                                <span style="font-size:15px;margin-left:5px">商品名称</span>
                                <span style="font-size:15px;margin-left:75px">商品数量</span>
                                <div style="margin-left:5px;margin-top:5px" v-for=" od in m.ordersDetails" :key="od.goodsId">
                                    <el-row >
                                        <el-col :span="12">
                                            <div>
                                                <span >{{ od.name }}</span>
                                            </div>
                                        </el-col>

                                        <el-col :span="12">
                                            <div> 
                                                <span>{{ od.goodsNum }}</span>
                                            </div>
                                        </el-col>
                                    </el-row>
                                    
                                        
                                        
  
                                </div>

                                <p></p>
                                <span style="font-size:15px;margin-left:5px"><b>{{ '合计：'+m.goodsNums+' 件' }}</b></span><span style="font-size:15px;margin-left:65px"><b>{{ '总金额：'+m.actualAmount+'￥' }}</b></span>
                                <p style="margin-top:20px"></p>
                            

                                <div style="margin-left:100px">
                                    <el-button type="info" round class="button"  v-if="m.status==2? true:false" size="medium" @click="userUpdateOrderStatus(m.id)"  >确认收货</el-button>
                                </div>

                            </div>

                            <p></p>

                            <div style="padding-top:10px;background-color: #efefef;"></div>
                            
                        </el-col>
                    </el-row>


                    <div style="text-align:center;font-size:15px;margin-top:10px" v-if=" this.myToReceiveOrders.length==0 ? true : false "><b>暂无数据</b></div>

                    
                  </el-tab-pane>

                  <el-tab-pane label="待评价" name="comment" >
                  
                    <el-row>
                        <el-col   v-for="m in myToCommentOrders" :key="m.id" style="background-color:white;border-radius:10px;">
                        
                            <div style="margin:10px">
                                <span style="font-size:13px;margin-left:5px">{{ '订单编号：'+m.id }}</span>
                                <span style="font-size:16px;margin-left:50px"><b>{{ m.status==2? '待收货':m.status==3 ? '已收货':m.status==0? '待分拣':m.status==1?'待配送':'出错！' }}</b></span>
                                <div style="font-size:13px;margin-left:5px">{{ m.createTime }}</div>
                                
                                <p ></p>
                                <span style="font-size:15px;margin-left:5px">商品名称</span>
                                <span style="font-size:15px;margin-left:110px">评价</span>
                                <p></p>
                                <div style="margin-left:5px;margin-top:5px" v-for=" od in m.ordersDetails" :key="od.goodsId">
                                    <el-row v-if="od.comment=='' || od.comment==null? true:false">
                                        <el-col :span="12">
                                            <div>
                                                <span style="font-size:14px"><b>{{ od.name }}</b></span>
                                            </div>
                                        </el-col>

                                        <el-col :span="12">
                                            <div style="margin-top:-10px;margin-left:-10px"> 
                                                <span><el-button type="text" round v-if="m.status==3? true:false" class="button"  @click="openDialog(od.goodsId,m.userId,m.id)"><b>评价一下</b></el-button></span>
                                            </div>
                                        </el-col>
                                    </el-row>
                                    
                                </div>
                        

                            </div>

                            <p></p>

                            <div style="padding-top:10px;background-color: #efefef;"></div>

                            
                            
                        </el-col>
                    </el-row>

                    <div style="text-align:center;font-size:15px;margin-top:10px" v-if=" this.myToCommentOrders.length==0 ? true : false "><b>暂无数据</b></div> 

                  
                </el-tab-pane>
                   </el-tabs>

                   <el-dialog
                    title="添加评论"
                    :visible.sync="dialogVisible"
                    width="90%"
                    border-radius:20px
                    >
                    <el-form >
                        <el-form-item label="评论内容" >
                            <el-input v-model="remarks" ></el-input>
                        </el-form-item>
                        
                        
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="insertComments">确 定</el-button>
                    </div>
                     
                    </el-dialog>

                
                </el-col>
              </el-container>
    
  
              
              
          </el-main>
  
          <!-- //尾部 -->

       
      </el-container>

    </div>
  
</template>

<script>



export default {

    data(){
        return{

            myOrders:[],
            myToReceiveOrders:[],
            myToCommentOrders:[],
            activeName: 'all',
            dialogVisible:false,
            remarks:'',
            goodsId:'',
            userId:'',
            orderId:'',
            userId:'',
            orderId:'',
            dispatcherId:'',
            distributionList:[]
            
        }
    },
    methods:{
        openDialog(goodsId,userId,orderId){
            this.goodsId=goodsId;
            this.userId=userId;
            this.orderId=orderId;
            this.dialogVisible=true;

        },
        userUpdateOrderStatus(id){
            let orders={};
            orders.id=id;
            orders.status=3;
            this.$axios.post('api/app/userUpdateOrderStatus',orders)
            .then(res=>{
                console.log(res.data);
                if(res.data.code==200){
                   this.activeName='comment';
                   this.findMyOrders();
             
             this.orderId = id;
             console.log("dds",this.orderId);   
             let phone = sessionStorage.getItem("phone");      
             this.$axios.get('/api/app/findDispatcherIdByPhoneAndStatus?orderId='+this.orderId+"&phone="+phone)
             .then(res =>{
                console.log('po',res.data);
              if(res.data.code == 200){
                this.dispatcherId = res.data.data;
                console.log('dddl', this.dispatcherId);
                let distribution ={};
               distribution.userId = this.dispatcherId;
               distribution.state = 3;
               distribution.orderId = this.orderId;
               this.confirmSuccess(distribution);
              }
            })

                }
            })

        },
        confirmSuccess(distribution){
              this.$axios.post('/api/app/distribution/updateDistributed',distribution)
             .then(res =>{
                console.log("k12",distribution);
                console.log("df32",res.data);
                console.log("ddd3",this.userId);
              if(res.data.code == 200){
                return "ok";
            }
          })

        },
        insertComments(){
            let comment={};
            comment.goodsId=this.goodsId;
            comment.userId=this.userId;
            comment.remarks=this.remarks;
            comment.orderId=this.orderId;
            this.$axios.post('api/app/insertComments',comment)
            .then(res=>{
                console.log(res.data);
                if(res.data.code==200){
                    this.dialogVisible=false;
                    this.activeName='comment';
                    this.findMyOrders();
                }
            })



        
        },
        returnMyPage(){
            this.$router.push('my');
        },
        findMyOrders(){
        
            let orders={};
            orders.phone=sessionStorage.getItem("phone");
            orders.state=0;
            this.$axios.post('api/app/findMyOrders',orders)
            .then(res=>{
                console.log(res.data);
                if(res.data.code==200){
                    this.myOrders=res.data.data;
                    let myOrdersArray=res.data.data;
                    let myReceiveOrders=[];
                    let myCommentOrders=[];
                    myOrdersArray.forEach(function(item){

                        if(item.status==2){

                            myReceiveOrders.push(item);

                        }else if(item.status==3){

                            let count=0;
                            item.ordersDetails.forEach(function(d){
                                if(d.comment!=null){
                                    count++;
                                }
                            })

                            if(count==item.ordersDetails.length){
                                
                            }else{
                                myCommentOrders.push(item);

                            }

                            
                            
                        }

                  })
                  this.myToReceiveOrders=myReceiveOrders;
                  this.myToCommentOrders=myCommentOrders;
                  console.log(myReceiveOrders);
                  console.log(myCommentOrders);
                 
                }
                
            })


      },
        handleClick(tab, event) {
        console.log(tab, event);
        this.findMyOrders();

        },
    },
    created(){
        this.activeName=this.$route.params.name;
        if(this.activeName==null){
            this.activeName='all';
        }
        let localActiveName=this.activeName;
        console.log(localActiveName);
        this.findMyOrders();
    }
}


</script>


<style scoped>



</style>